<template>
  <div class="home">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>招募设置</span>
      </div>
      <div class="card-content">
        <el-tag>招募推广员</el-tag>
        <el-switch v-model="val" active-color="#13ce66" inactive-color="#ff4949" @change='changeStatus'></el-switch>
        <el-input style="margin-top:10px" size="medium" v-model="link" @change='changeLink' placeholder="推广员招募连接"></el-input>
      </div>
    </el-card>
    <!-- <search-apply ref="searchOrder" @search="search" ></search-apply> -->
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>推广员申请记录</span>
      </div>
      <div class="card-content">
         <el-table border :data="tableData" stripe style="width: 100%">
     
      <el-table-column prop="content" align="center" label="消息内容"></el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
      <el-table-column  align="center" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="detail(scope.row.messageID)">查看</el-button>
          <el-button size="mini" type="text" @click="accept(scope.row)">接受</el-button>
          <el-button size="mini" type="text" @click="refuse(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
      </div>
    </el-card>
    <el-dialog title="申请通过" :visible.sync="dialog1" width="450px" :modal-append-to-body="false">
      <el-form :model="form1"  ref="form1" label-width="110px">
      <el-form-item label="岗位" prop="positionID">
                        <el-select v-model="form1.positionID" placeholder="请选择岗位">
                           <el-option v-for="item in positionList"
                            :label="item.position"
                            :key="item.positionID"
                            :value="item.positionID"
                           >
                          </el-option>
                        </el-select>
                        
                      </el-form-item>
      <el-form-item label="级别" prop="levelCode">
                        <el-select v-model="form1.levelCode" placeholder="请选择级别">
                           <el-option v-for="item in levelList"
                            :label="item.name"
                            :key="item.value"
                            :value="item.value"
                           >
                          </el-option>
                        </el-select>
                        
                      </el-form-item>
      <el-form-item class="form-btns">
                <el-button type="primary" @click="submitAccept">提交</el-button>
                <el-button @click="dialog1 = false">取 消</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="申请拒绝" :visible.sync="dialog2" width="450px" :modal-append-to-body="false">
      <el-form :model="form2"  ref="form2" label-width="110px">
      <el-form-item label="拒绝原因" prop="reason">
      <el-input v-model="form2.reason" placeholder="请输入拒绝原因"></el-input>
      </el-form-item>
      <el-form-item class="form-btns">
                <el-button type="primary" @click="submitRefuse">提交</el-button>
                <el-button @click="dialog2 = false">取 消</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      class="dialog"
      title="审核"
      width="750px"
      top="8vh"
      :visible.sync="dialog"
      :modal-append-to-body="false"
    >
    <div class="row">
      <div class="row-item">
        <div class="key">姓名</div>
        <div class="value">{{item.childName}}</div>
      </div>
      <div class="row-item">
        <div class="key">性别</div>
        <div class="value">{{item.childGender}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">电话</div>
        <div class="value">{{item.mobile}}</div>
      </div>
      <div class="row-item">
        <div class="key">所在省</div>
        <div class="value">{{item.province}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">所在市</div>
        <div class="value">{{item.city}}</div>
      </div>
      <div class="row-item">
        <div class="key">地址</div>
        <div class="value">{{item.address}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">所属机构</div>
        <div class="value">{{item.belongtoCompany}}</div>
      </div>
      <div class="row-item">
        <div class="key">申请备注</div>
        <div class="value">{{item.comments}}</div>
      </div>
    </div>
    
    </el-dialog>
  </div>
</template>

<script>
import SearchApply from '@/components/SearchApply'
import { updateSetting,querySetting,positionList,getDistributorList, getDistributorDetail,getMessageListByType,getApplyForDistributorMessage,patchAcceptApplication,patchRejectApplication } from '@/api'

export default {
  name: 'market-apply',
  components: {
    SearchApply
  },
  data() {
    return {
      val: true,
      link: '',
      tableData: [],
      dialog: false,
      dialog1: false,
      dialog2: false,
      total: 0,
      item: {},
      form1:{},
      form2:{},
      positionList:{},
      recruitSwitch:1,
      levelList:[{name:'分组一',value:'分组一'},{name:'分组二',value:'分组二'}],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getMessageListByType(0).then(res => {
        this.tableData = res
        this.total = res.length
        
      })
      positionList().then((res) => {
        this.positionList = res
      })
      querySetting({settingName:'recruitSwitch'}).then((res) => {
         this.recruitSwitch=res[0].settingValue
         if(res[0].settingValue==0) this.val=true
         else this.val=false
      })
      querySetting({settingName:'recruitLink'}).then((res) => {
         this.link=res[0].settingValue
      })
    },
    search(){

    },
    detail(id) {
      getApplyForDistributorMessage(id).then(res => {
        this.item = res
        this.dialog = true
        console.log(res)
      })

    },
    accept(row) {
      this.form1=row
      this.dialog1=true
    },
    refuse(row) {
      this.form2=row
      this.dialog2=true
    },
    submitAccept(){
       patchAcceptApplication(this.form1).then(res => {
          this.$message({
            message: '推广员申请已通过',
            type: 'success'
          })
          this.getData()
          this.dialog1 = false
        })
    },
    submitRefuse(){
        patchRejectApplication(this.form2).then(res => {
          this.$message({
            message: '推广员申请已拒绝',
            type: 'success'
          })
          this.getData()
          this.dialog2 = false
        })
    },
    changeStatus(){
      if(this.val) this.recruitSwitch=0;
      else this.recruitSwitch=1;
      updateSetting({settingName:'recruitSwitch',settingValue:this.recruitSwitch});
    },
    changeLink(){
      updateSetting({settingName:'recruitLink',settingValue:this.link});
		}
  }
}
</script>

<style scope lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin.styl'
.row
  width 100%
  flex-row()
  .row-item
    flex 1
    line-height 30px
    display flex
    .key
      margin-right 10px
    .value
      color #f90
.home
  padding-top 10px
.box-card
  margin-bottom 20px
.card-item
  text-align center
  padding-top 10px
  .part-center
    font-size 40px
    line-height 80px
    margin-top 10px
    font-weight bold
    color #ff9900
</style>
